Immersive Sprint - REDUX

1. 리액트는 프레임워크가 아니다. 라이브러리다.
리액트는 two-way data flow가 아니라 one way flow다.
리덕스가 flux 라이브러리
프레임워크랑 라이브러리 차이 알아보기!

2. 버츄얼 DOM은 새로운 부분만 렌더링 해줌. 리액트의 큰 특징 중 하나. 리액트의 장점 : 버츄얼 DOM을 써서 빠르다! component reRender를 효과적으로 할 수 있게 해줌.

3. DOM을 잘 바꿀 수 있게 해줌.

4. props 부모 컴퍼넌트로부터 자식 컴퍼넌트로 속성을 내려주는데 사용, state는 컴퍼넌트의 현재 상태를 나타냄. 라이프 사이클을 통해서 액션을 바꿔줌. 컴퓨터는 상태기계. 상태를 조절하는 것이 컴퍼넌트. 어떤 때 pros를 쓰고, 어떤때 스테이터스를 써야 하는지 알아야 한다.

5. import, export 같은 경우를 es5로 바꿔줌. Babel은 컴파일러지, 번들러는 아님. 3가지 차이점(컴파일러, 트랜스파일러, 번들러의 차이를 알아야 함. 공식 문서를 읽어야 함.)

Redux의 정의(3번) : Redux is the name of a Flux library that is used to manage state in a React application.

Ajax는 native로 짤 수도 있고, 진화된 형태의 fatch api도 있음.

6. state에 대한 설명
State should be held at the top-most component that needs access to it
상태는 꼭 상위에 있을 필요는 없다. 자체내에서 관리만 할 수 있다면. state 관리가 리액트의 난제이자 숙제이고, 그걸 해결해보겠다는게 리덕스.
Components manage their own state.
Initial values can be set for state

State can be passed from parent components to child components as props

7. functional도 내부적으로 렌더 됨. return은 항상 있어야 함.
return도 렌더와 동일.
array 형태로 return이 됨. multiple 형태로 return이 됨. 이건 최근 변경상황.
소괄호하는 것은 사실 return(return statement를 생략한 es2016 문법)

* 모든 컴퍼넌트는 엘리먼트를 리턴함.
스테이트풀하다 -> 클래스로 만든 것
state는 순수 오브젝트.

9. 1번 어느 정도는 동의하지만 리덕스에 비하면 별로라는 의미로?
    프레임 워크가 아니다. 모든 유틸리티를 제공하지 않는다.

11. didmount?
    언제 데이터가 들어올지 모르니까!
    라이프 싸이클은 자체적으로 돌아가고.
	render에 사이트 이펙트가 생길만한 것을 넣으면 안됨.
	다 mount 된 이후에 state가 안전하게 셋할 수 있는 환경을 만들어야.
    생각해볼 문제.

12. Define a function that updates state on component A, pass the function as a prop to component B, and invoke the function when B is clicked on.

{
    type : "WITHDRAW_MONEY",
    amount : "$10,000"
}

function createStore(reducer) {
    var state;
    var listeners = []

    function getState() {
        return state
    }

    function subscribe(listener) {
        listeners.push(listener)
        return unsubscribe() {
            var index = listeners.indexOf(listener)
            listeners.splice(index, 1)
        }
    }

    function dispatch(action) {
        state = reducer(state, action)
        listeners.forEach(listener => listener())
    }

    dispatch({})

    return { dispatch, subscribe, getState }
}

import { createStore } from 'redux'
const store = createStore(reducer) //this has been updated to include the created reducer.

## reducer 코드
export default (state) => {
    return state
}  // 항상 new state를 반환한다.

{
    type : "",
    payload : {}
}

{
    type : "withdraw_money",
    payload : {
       amount : "$4000"
    }
}

function reducer(state, action) {
    //return new state
}

일반적인 패턴은

function reducer(state, action) {
    switch (action.type) {
        case "withdraw_money":
            //do something
        	break;
        case "deposit-money":
            //do something
            break;
        default :
            	return state;
    }
}

function reducer(state, action) {
  switch (action.type) {
    case 'is_open':
      return //return new state
    case 'is_clicked':
      return //return new state
    default:
      return state
  }
}

export function setTechnology(text) {
  return {
    type: 'SET_TECHNOLOGY',
    tech: text,
  }
}

const SetTechnology = text => ({ type: 'SET_TECHNOLOGY', text })

// 아래처럼 하면 절대 안 됨!
export default (state, action) => {
  switch (action.type) {
    case 'SET_TECHNOLOGY':
      state.tech = action.text
      return state

    default:
      return state
  }
}

// 대신에
return {
  ...state, // 이렇게!
  tech: action.text,
}